<template>
  <section class="wx-mes-tel">

    <div class="left-content">
      <div class="phone-top" :style="wxTopImage"></div>
      <div class="phone-content">
        <div class="contain">
          <h6 v-if="isOldTemplateType">{{form.first}}</h6>
          <p v-for="(item,index) in modelMap" :key="index">{{`${item.name}：【不可编辑】`}}</p>
          <p v-if="isOldTemplateType">{{form.remark}}</p>
        </div>
      </div>
      <div class="phone-footer" :style="wxBottomImage"></div>
    </div>
    <div class="right-content">
      <el-input v-if="isOldTemplateType" type="textarea" resize="none" v-model="form.first" placeholder="请输入标题"></el-input>

      <template v-for="(item,index) in modelMap">
        <div
          class="valid-list"
          :key="index" 
          disabled
        >{{`${item.name}：【不可编辑】`}}
        </div>
      </template>

      <el-input v-if="isOldTemplateType" type="textarea" resize="none" v-model="form.remark" placeholder="请输入内容"></el-input>
    </div>
        
  </section>
</template>

<script>
import { getLocalesOssUrl } from '@src/util/assets'
const wxTopImage = `background-image: url(${getLocalesOssUrl('/common/wx-top.png')})`
const wxBottomImage = `background-image: url(${getLocalesOssUrl('/common/wx-bottom.png')})`
export default {
  // 微信公众号消息模版
  name:'wechat-mes-tel',

  data(){
    return{
      wxTopImage,
      wxBottomImage,
      form:{
        first:'',
        remark:''
      },

      modelMap:[],
      isOldTemplateType: true, // 判断是不是老版微信消息模版，默认老版的消息模版
    }
  },

  props:{
    sourceData:{
      type:Object,
      required:true
    },
    // 当前渠道的channel值
    channel:{
      type:[String,Number],
      required:true
    },
    
    // 当前选中的渠道
    sendChannelList:{ 
      type:Array,
      required:true
    },
    // 是否校验模版内容变化 默认要校验 触发器不校验
    isValidateChange: {
      type: Boolean,
      default: true
    },
  },

  mounted(){
    const { first = '', remark = '', modelMap = '', templateType = '' } = this.sourceData || {}
    this.form.first = first || ''
    this.form.remark = remark || ''
    modelMap && (this.modelMap = JSON.parse(modelMap));
    this.isOldTemplateType = templateType != 2; // 2 是新版微信消息版本，新版不可以设置消息的头和尾
  },

  methods:{
    // 供父组件调用，提交校验，当校验失败resolve里面传入失败原因
    validate(){
      const { first, remark } = this.form

      if(first && remark){
        return Promise.resolve(true)
      }
        
      // 当前渠道是否被勾选了
      const isSelected = this.sendChannelList.includes(this.channel)
      return Promise.resolve(`您${isSelected ? '勾选了' : '修改了'}公众号消息渠道，请先设置内容`)
    },

    // 供父组件调用，是否有修改模版
    isChange(){
      const { first = '', remark = '', modelMap = '' } = this.sourceData || {}
      return (first !== this.form.first || remark !==  this.form.remark)
    },
    
    // 父组件调用，整理接口需要的参数
    getParam(){
      const { first, remark } = this.form
      let params = { wechatMessageTemplateParam: null }
      if(!this.isChange() && this.isValidateChange) return params;
      
      params.wechatMessageTemplateParam = {
        id:this.sourceData.id,
        first,
        remark
      }
      return params
    }
  }
}
</script>

<style lang="scss" scoped>
.wx-mes-tel{
    padding:16px 20px 11px;
    display: flex;
    .left-content{
        width:260px;
        height: 379px;
        
        .phone-top{
            width:260px;
            height:57px;
            background-size:cover;
        }
        .phone-content{
            background: #EDEDED;
            border-left:1px solid #D9D9D9;
            border-right:1px solid #D9D9D9;
            padding:8px;
            .contain{
                height: 244px;
                overflow-y:auto ;
                background: #FFFFFF;
                border-radius: 4px;
                padding:11px 12px;
                box-sizing: border-box;
                h6{
                    font-size: 16px;
                    font-weight: 400;
                    color: #262626;
                    line-height: 22px;
                    margin-bottom:10px;
                }
                p{
                    margin:0;
                    font-size:12px;
                }
            }
        }
        .phone-footer{
            width: 260px;
            height: 57px;
            width:100%;
            background-size:cover;
        }
    }
    .right-content{
        margin-left:34px;
        width:268px;
        
        .el-textarea ::v-deep textarea{
          height:64px;
          margin-top:12px;
          font-size:14px;
        }
        .valid-list{
          width: 268px;
          height: 32px;
          background: #F5F5F5;
          border-radius: 4px;
          border: 1px solid #D9D9D9;
          padding:5px 12px;
          box-sizing: border-box;

          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #BFBFBF;
          line-height: 22px;
          margin-top:12px;
        }
    }

}
</style>